<!Doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
li{
width:110px;
height:33.3%;
float:left;
border:1px solid black;
}
ul{
list-style:none;
width:500px;
height:300px;
align:center;
}
.biaoge{
width:500x;
}
.biaoge li{
float:left;
width:170px;
}
</style>       
<script src="jquery-3.3.1.js"></script>
<script>
function addlisthtml(){
var id=$("#id").val();
var name=$("#name").val();
$("#list").append('<li onclick="oneClick(this)"><input type="checkbox" name="checkselect" onclick="checkAll(this)"/></li><li onclick="twoClick(this);">'+id+'</li><li onclick="threeClick(this)">'+name+'</li><li onclick="fourClick(this);delli(this)">&nbsp;DEL</li>');

}


 

function delli(obj){

$(obj).prev().prev().prev().remove();
$(obj).prev().prev().remove();
$(obj).prev().remove();
$(obj).remove();
/*
$("#list").removeChild(obj.previousSibling.previousSibling.previousSibling);
$("#list").removeChild(obj.previousSibling.previousSibling);
$("#list").removeChild(obj.previousSibling);
$("#list").removeChild(obj);
*/
}

function checkAll(c){

$("input[name='checkselect']:checked").each(function(){
$(this).parent().next().next().next().remove(); 
 $(this).parent().next().next().remove();
$(this).parent().next().remove();
(this).parent().remove();
})
}

function delAll(){
$("input[name='checkselect']:checked").each(function(){
$(this).parent().next().next().next().remove();
$(this).parent().next().next().remove();
$(this).parent().next().remove();
$(this).parent().remove();
});
}
function checkOwn(){
 var checkOwn=$("#checkOwn");
				if(checkOwn.prop('checked')){
				$("input[name='checkselect']").attr("checked","checked");
				}else{
				$("input[name='checkselect']").attr("checked","null");
				}	
//$().each(function(){})
}

function opposed(){
$("input[name='checkselect']").each(function(){
$(this).prop('checked',!$(this).prop('checked'));
})


}

function oneClick(obj){
$(obj).next().next().next().css("background-color","blue");
$(obj).next().next().css("background-color","blue");
$(obj).next().css("background-color","blue");
$(obj).css("background-color","blue");
}
function twoClick(obj){
$(obj).css("background-color","blue");
$(obj).prev().css("background-color","blue");
$(obj).next().css("background-color","blue");
$(obj).next().next().css("background-color","blue");
}
function threeClick(obj){
$(obj).prev().css("background-color","blue");
$(obj).prev().prev().css("background-color","blue");
$(obj).next().css("background-color","blue");
$(obj).css("background-color","blue");
}
function fourClick(obj){
$(obj).prev().prev().prev().css("background-color","blue");
$(obj).prev().prev().css("background-color","blue");
$(obj).prev().css("background-color","blue");
$(obj).css("background-color","blue");
}


</script>
<head>
<body>


<div>
<ul id="list">
<li><input type="button" value="全选"/><input type="checkbox" onclick="checkOwn()" id="checkOwn"/></br>
<input type="button" value="反选"/><input type="checkbox" onclick="opposed()" id="opposed"/></br>选中</li>
<li>编号</li>
<li>姓名</li>
<li><input type="button" value="删除" ></li>

<li><input type="checkbox" name="checkselect" onclick="checkAll(this)"/></li><li>1</li><li>李白</li><li></li>
</ul>
</div>
<hr/>
<ul class="biaoge">



<li>编号</li>
<li><input type="text" name="id" id="id"/></li>


<li>姓名</li>
<li><input type="text" style="" name="username" id="name"/></li>


<li><input type="reset" value="重置"/></li>
<li><input type="button" value="添加" onclick="addlisthtml()"/></li>


</ul>

</body>
</html>